<template>
  <view class="hui-load-image">
    <image
      v-if="loading"
      :style="'width:' + mstyle.width + ';height:' + mstyle.height + ';border-radius:' + mstyle.borderRadius"
      class="loading-img"
      :src="loadsrc"
    ></image>
    <image :style="'width:' + width + ';height:' + height + ';border-radius:' + mstyle.borderRadius" class="real-img" :src="imgsrc" @load="loaded" @error="errored"></image>
  </view>
</template>

<script>
export default {
  name: 'hui-load-image',
  props: {
    //图片路径
    src: {
      type: [String],
      default: 'http://minprogram.yhs365.com/wechat/zyc/error.png'
    },
    //图片样式
    mstyle: {
      type: [Object],
      default: function() {
        return { width: '0px', height: '0px', borderRadius: '0rpx' };
      }
    },
    //图片大小类型  long:长图片  large大图片 noraml:一般图片
    type:{
      type: [String],
      default: 'normal'
    }
  },
  created() {
    this.imgsrc = this.src;
    if(this.type == 'large'){
      this.loadsrc = 'http://minprogram.yhs365.com/wechat/zyc/big-loading.png'
    }
  },
  data() {
    return {
      loading: true, //图片正在加载中
      imgsrc: '', //图片路径
      width: '0px', //图片宽度
      height: '0px', //图片高度
      loadsrc:'http://minprogram.yhs365.com/wechat/zyc/loading.png'
    };
  },
  watch:{
    src(val){
      this.imgsrc = val;
    }
  },
  methods: {
    loaded() {
      this.loading = false;
      this.width = this.mstyle.width;
      this.height = this.mstyle.height;
    },
    errored() {
      if(this.type == 'large'){
        this.imgsrc = 'http://minprogram.yhs365.com/wechat/zyc/large-error.png'
      }else if(this.type == 'long'){
        this.imgsrc = 'http://minprogram.yhs365.com/wechat/zyc/long-error.png'
      }else{
        this.imgsrc = 'http://minprogram.yhs365.com/wechat/zyc/error-image.png'
      }
    }
  }
};
</script>

<style lang="scss">
  .hui-load-image{
    line-height: 0;
  }
</style>
